<template>
  <el-card>
    <template #header>
      <div class="top">
        <div class="left">钱包管理</div>
        <div class="right">
          <span>总充值:{{ recharge_total }}</span>
          <span>总余额:{{ wallet_money_total }}</span>
        </div>
      </div>
    </template>
    <el-form ref="queryForm" inline :model="queryForm" @submit.native.prevent>
      <el-form-item>
        <el-select
          v-model="form.v1"
          placeholder="骑行区域"
          @change="changeArea"
        >
          <el-option
            v-for="item in options1"
            :key="item.register_area_id"
            :label="item.areaname"
            :value="item.register_area_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryForm.mobile" clearable placeholder="手机号" />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="form.v2"
          placeholder="押金缴纳状态"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options2"
            :key="item.deposit_type"
            :label="item.label"
            :value="item.deposit_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          native-type="submit"
          type="primary"
          @click="handleQuery"
        >
          查询
        </el-button>
        <el-button @click="handleReset('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="c-left">
        <el-table
          ref="tableSort"
          v-loading="listLoading"
          border
          :data="dataList"
          @selection-change="setSelectRows"
        >
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            align="center"
            :label="item.label"
            :sortable="item.sortable"
          >
            <template #default="{ row }">
              <span>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="metaList.page"
          :layout="layout"
          :page-size="metaList.per_page"
          style="width: 50%"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
        <!-- <table-edit ref="edit" /> -->
      </div>
      <div class="c-right">
        <el-table>
          <div class="name">钱包明细</div>
          <el-table-column label="交易类型" />
          <el-table-column label="支付方式" />
          <el-table-column label="交易金额" />
          <el-table-column label="交易状态" />
          <el-table-column label="交易时间" />
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script>
  import { getList, getPacker } from '@/api/shouye'
  // import { getList } from '@/api/shouye'
  export default {
    data() {
      return {
        options1: [
          { register_area_id: '', areaname: '全部' },
          { register_area_id: '1', areaname: '中牟' },
          { register_area_id: '2', areaname: '郑州龙子湖' },
          { register_area_id: '3', areaname: '巩义' },
          { register_area_id: '4', areaname: '莆田' },
        ],
        options2: [
          { deposit_type: '', label: '全部' },
          { deposit_type: '1', label: '已缴纳' },
          { deposit_type: '0', label: '未缴纳' },
        ],
        form: {},
        layout: 'total, sizes, prev, pager, next, jumper',
        recharge_total: 0,
        wallet_money_total: 0,
        dataList: [],
        metaList: {},
        total: 0,
        listLoading: false,
        columns: [
          {
            label: '昵称',
            width: 'auto',
            prop: 'nickname',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '手机号码',
            width: 'auto',
            prop: 'mobile',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '所属区域',
            width: 'auto',
            prop: 'areaname',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '押金',
            width: 'auto',
            prop: 'deposit_money',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '充值金额(元)',
            width: 'auto',
            prop: 'recharge',
            sortable: true,
            disableCheck: true,
          },
          {
            label: '钱包余额(元)',
            width: 'auto',
            prop: 'recharge',
            sortable: true,
            disableCheck: true,
          },
        ],
        selectRows: '',
        // 初始状态下跳转页面的数据
        queryForm: {
          page: 1,
          per_page: 10,
          title: '',
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 选择骑行区域
      changeArea(e) {
        // console.log(e, '选择骑行的区域')
        this.queryForm.register_area_id = e
        // console.log(this.queryForm, '111')
      },
      // 选择押金状态
      changeStatus(e) {
        // console.log(e, '选择骑行的区域')
        this.queryForm.deposit_type = e
        // console.log(this.queryForm, '111')
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      // 重置按钮
      // 用的自己写的重新调用接口并将queryForm重新赋值为空
      // handleReset(formName) {
      //   this.$refs[formName].resetFields()
      // },
      handleReset() {
        this.queryForm = {
          page: 1,
          per_page: 10,
          title: '',
        }
        this.fetchData()
      },
      handleSizeChange(val) {
        this.queryForm.per_page = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        console.log(this.queryForm, '1111111')
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.page = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { recharge_total, wallet_money_total } = await getPacker()
        this.wallet_money_total = wallet_money_total
        this.recharge_total = recharge_total
        const { data, meta } = await getList(this.queryForm)
        this.dataList = data
        this.total = meta.total
        this.metaList = meta
        this.listLoading = false
      },
    },
  }
</script>

<style scoped>
  .content {
    display: flex;
    justify-content: space-between;
  }
  .c-left {
    width: 47%;
  }
  .c-right {
    width: 47%;
  }
  .right {
    display: flex;
  }
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-bottom: 10px;
  }
  .card {
    padding: 10px;
  }
  .right span:nth-of-type(1) {
    margin-right: 20px;
  }
</style>
